<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柱状图变色</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.5.1.min.js"></script>
    <style>
        html {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <table class="table table-bordered table-hover table-striped">
        <thead>
            <th style="width:20%">省份</th>
            <th style="width:80%">监听情况</th>
        </thead>
        <tbody id="data">

        </tbody>
    </table>
</body>
<script type="text/javascript">
    /**
     *初始化
     */
    $(function () {
        //加载json数据
        $.getJSON('./json/列表加柱状图变色.json', function (data) {
            //先初始化表格
            var mHtml = '';

            $.each(data, function (i, json) {
                mHtml += "<tr><td style='text-align: center;line-height:180px;'>" + json.province + "</td><td><div id='" + json.id + "' style='width: 100%;height: 180px;'></div></td></tr>";
            });
            $('#data').append(mHtml);

            //初始化折线图
            var h0_4 = [];
            var h4_8 = [];
            var h8_12 = [];
            var h12_16 = [];
            var h16_20 = [];
            var h20_24 = [];
            $.each(data, function (i, data) {
                var xTitles = [];
                var list = data.list;
                $.each(list, function (i2, data2) {
                    xTitles.push(data2.time);
                    var details = data2.details;
                    $.each(details, function (i3, data3) {
                        if (i3 == 0) {
                            h0_4.push(data3);
                        } else if (i3 == 1) {
                            h4_8.push(data3);
                        } else if (i3 == 2) {
                            h8_12.push(data3);
                        } else if (i3 == 3) {
                            h12_16.push(data3);
                        } else if (i3 == 4) {
                            h16_20.push(data3);
                        } else if (i3 == 5) {
                            h20_24.push(data3);
                        }
                    });
                });
                var myChart = echarts.init(document.getElementById(data.id));
                // 指定图表的配置项和数据
                var option = {
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: xTitles
                        }
                    ],
                    yAxis: {
                        min: 0,  //取0为最小刻度
                        max: 6, //取100为最大刻度
                        minInterval: 1 //分割刻度
                    },
                    series: [
                        {
                            name: '00:00~04:00',
                            type: 'bar',
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [1,1,1,1,1,1,1],
                            itemStyle: {
                                normal: {
                                    //这里是重点
                                    color: function (params) {
                                        var dataIndex = params.dataIndex;
                                        if (h0_4[dataIndex]==0){
                                            return "#FFC655";
                                        }else {
                                            return "#7CCE7A";
                                        }
                                    }
                                }
                            }
                        }, {
                            name: '04:00~08:00',
                            type: 'bar',
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [1,1,1,1,1,1,1],
                            itemStyle: {
                                normal: {
                                    //这里是重点
                                    color: function (params) {
                                        var dataIndex = params.dataIndex;
                                        if (h4_8[dataIndex]==0){
                                            return "#FFC655";
                                        }else {
                                            return "#7CCE7A";
                                        }
                                    }
                                }
                            }
                        }, {
                            name: '08:00~12:00',
                            type: 'bar',
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [1,1,1,1,1,1,1],
                            itemStyle: {
                                normal: {
                                    //这里是重点
                                    color: function (params) {
                                        var dataIndex = params.dataIndex;
                                        if (h8_12[dataIndex]==0){
                                            return "#FFC655";
                                        }else {
                                            return "#7CCE7A";
                                        }
                                    }
                                }
                            }
                        }, {
                            name: '12:00~16:00',
                            type: 'bar',
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [1,1,1,1,1,1,1],
                            itemStyle: {
                                normal: {
                                    //这里是重点
                                    color: function (params) {
                                        var dataIndex = params.dataIndex;
                                        if (h12_16[dataIndex]==0){
                                            return "#FFC655";
                                        }else {
                                            return "#7CCE7A";
                                        }
                                    }
                                }
                            }
                        }, {
                            name: '16:00~20:00',
                            type: 'bar',
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [1,1,1,1,1,1,1],
                            itemStyle: {
                                normal: {
                                    //这里是重点
                                    color: function (params) {
                                        var dataIndex = params.dataIndex;
                                        if (h16_20[dataIndex]==0){
                                            return "#FFC655";
                                        }else {
                                            return "#7CCE7A";
                                        }
                                    }
                                }
                            }
                        }, {
                            name: '20:00~24:00',
                            type: 'bar',
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [1,1,1,1,1,1,1],
                            itemStyle: {
                                normal: {
                                    //这里是重点
                                    color: function (params) {
                                        var dataIndex = params.dataIndex;
                                        if (h20_24[dataIndex]==0){
                                            return "#FFC655";
                                        }else {
                                            return "#7CCE7A";
                                        }
                                    }
                                }
                            }
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            });

        });
    });
</script>
</html>